<script setup lang="ts">
import html2canvas from 'html2canvas'
import { useDict } from '@/utils/dict'
import type { Student, StudentEducationInfo, StudentFamilyInfo, StudentScoreInfo } from '@/types/user'
import exportPDF from '@/utils/exportPDF'
import DictTag from "@/components/DictTag/index.vue";

defineProps<
    {
      student?:
      Student &
      StudentScoreInfo &
      { familyMembers?: StudentFamilyInfo[]; educationalExperience?: StudentEducationInfo[] }
    }
>()

async function handleExport() {
  const promise = Promise.all([
    html2canvas(document.getElementById('page-pdf')!, { logging: false, scale: window.devicePixelRatio * 3 }),
  ])
  exportPDF(await promise, 'p', 'cm', [21.0, 29.7])
}

defineExpose({ onExport: handleExport })

const {
  sys_user_sex,
  student_disciplines,
  student_nation,
  student_political,
  student_language,
} = useDict(
  'sys_user_sex',
  'student_disciplines',
  'student_nation',
  'student_political',
  'student_language',
)
</script>

<template>
  <div id="page-pdf" class="page-pdf">
    <h2 style="font-family: '黑体';">
      附件3
    </h2>
    <div class="title">
      <p>贵州省专科生国家励志奖学金申请表</p>
    </div>
    <div class="page">
      <div class="center">
        <div class="yc">
          <span class="left">本人</span>
          <span class="left">情况</span>
        </div>
      </div>
      <div class="men" style="border:0">
        <div>姓&nbsp;名</div>
        <div>{{ student?.studentName }}</div>
        <div>性别</div>
        <div>
          <DictTag :options="sys_user_sex" :value="student?.sex" type="text" style="padding:0; border: none;"/>
        </div>
        <div>出生年月</div>
        <div />
        <div class="imge center">
          照片
        </div>
        <div>民&nbsp;族</div>
        <div />
        <div>政治面貌</div>
        <div />
        <div>入学时间</div>
        <div />
        <div>学&nbsp;号</div>
        <div class="xuehao" />
        <div>所在年级</div>
        <div />
        <div>身份证号</div>
        <div class="hao" />
        <div>联系电话</div>
        <div />
        <div class="col">
          <span />
          <span>贵阳人文科技学院</span>&nbsp;
          <span> {{ student?.studentCollege }}</span>
          <span>学院(系)</span>&nbsp;
          <span> {{ student?.studentMajor }}</span>
          <span>专业</span>
          <span> {{ student?.studentClass }}</span>
          <span>班</span>
        </div>
        <div class="ccc">
          曾任何种奖励
        </div>
        <div class="cc" />
      </div>
      <div class="center">
        <div class="yc">
          <span class="left">家庭</span>
          <span class="left">经济</span>
          <span class="left">情况</span>
        </div>
      </div>
      <div class="family" style="border:0">
        <div class="one">
          家庭人口总数
        </div>
        <div class="one1" />
        <div class="one">
          家庭月总收入
        </div>
        <div />
        <div>人均月收入</div>
        <div />
        <div>收入来源</div>
        <div />
        <div class="one">
          家庭住址
        </div>
        <div class="two" />
        <div>邮政编码</div>
        <div />
      </div>
      <div class="center">
        <div class="yc">
          <span class="left">学习</span>
          <span class="left">成绩</span>
        </div>
      </div>
      <div class="study" style="border:0">
        <div>
          <span>成绩排名:</span>
          <span class="bbb">/</span>
          <span>(名次总人数)</span>
        </div>
        <div>
          <span>实行综合考评排名:</span>
          <span>是;</span>
          <span>否</span>
        </div>
        <div>
          <span>必修课</span>
          <span class="bbb" />
          <span>门,其中及格以上</span>
          <span class="bbb" />
          <span>门</span>
        </div>
        <div>
          <span>如是，排名:</span>
          <span class="bbb">/</span>
          <span>(名次/总人数)</span>
        </div>
      </div>
      <div class="center">
        <div class="yc">
          <span class="left">申请</span>
          <span class="left">理由</span>
        </div>
      </div>
      <div class="apply">
        <span class="apply1">申请人签名：</span>
        <span class="apply2">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日</span>
      </div>
      <div class="center">
        <div class="yc">
          <span class="left">院系</span>
          <span class="left">审核</span>
          <span class="left">意见</span>
        </div>
      </div>
      <div class="yuanxi">
        <span class="yuanxi1">（公章）</span>
        <span class="yuanxi2">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日</span>
      </div>
      <div class="center">
        <div class="yc">
          <span class="left">学校</span>
          <span class="left">审核</span>
          <span class="left">意见</span>
        </div>
      </div>
      <div class="xuexiao">
        <span class="xuexiao1">（公章）</span>
        <span class="xuexiao2">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日</span>
      </div>
    </div>
  </div>
</template>

<style>
.page-pdf {
  width: 21cm;
  height: 29.7cm;
  padding: 1.6cm 2.6cm;
  margin: auto;
}
.page div {
  border: 1px solid black;
}
.page {
  display: grid;
  grid-template-columns: 8% 92%;
  grid-template-rows: 6fr 3fr 2fr 4fr 4fr 4fr;
  border: 1px solid black;
  height: 80%;
}

.title {
  font-family: 'SimSun', '宋体', serif;
  font-weight: bold;
}
h2 {
  font-family: '黑体';
  font-size: 21.2px;
  font-weight: normal;
}
p {
  text-align: center;
  font-size: 24px;
}
.page {
  font-size: 13.87px;
  font-family: '仿宋', serif;
}
.men {
  display: grid;
  grid-template-columns: 2fr 2fr 2fr 2fr 2fr 3fr 3fr;
  grid-template-rows: repeat(6,1fr);
}
.men div,
.family div,
.study div {
  padding-top: 10px;
}
span.bbb {
  display: inline-block;
  width: 40px;
  border-bottom: 1.5px solid black;
}
.family {
  display: grid;
  grid-template-columns: 2fr 2fr 2fr 2.4fr 1.6fr 3fr 3fr;
  grid-template-rows: repeat(3,1fr);
}
.study {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: repeat(2,1fr);
}
.imge {
  grid-row: 1/span 5;
  grid-column: 7;
}
.xuehao {
  grid-row: 3;
  grid-column: 2/span 3
}
.hao {
  grid-row: 4;
  grid-column: 2/span 3
}
.col {
  grid-row: 5;
  grid-column: 1/span 6;
}
.col .cols {
  display: inline-block;
  width: 50px;
}
.men .ccc {
  grid-row: 6;
  grid-column: 1/span 2;
}
.men .cc {
  grid-row: 6;
  grid-column: 3/span 5;
}
.family .one {
  grid-column: 1/span 2;
}
.family .one1 {
  grid-column: 3/span 5;
}
.family .two {
  grid-column: 3/span 3;
}

.apply {
  position: relative;
}
.apply1{
  position: absolute;
  bottom: 6px;
  right: 260px;
}
.apply2{
  position: absolute;
  bottom: 6px;
  right: 10px;
}
.yuanxi {
  position: relative;
}
.yuanxi1{
  position: absolute;
  bottom: 20px;
  right: 240px;
}
.yuanxi2 {
  position: absolute;
  bottom: 20px;
  right: 10px;
}
.xuexiao {
  position: relative;
}
.xuexiao1{
  position: absolute;
  bottom: 20px;
  right: 240px;
}
.xuexiao2 {
  position: absolute;
  bottom: 20px;
  right: 10px;
}

.page span.left {
  display: block;
  padding-bottom: 12px;
}
div.yc {
  border-color: white;
}

.page div {
  text-align: center;
}
div.center {
  display: grid;
  align-items: center;
  text-align: center;
}
div.yc {
  border-color: white;
}
</style>
